<template>
  <div class="address-list" style="padding-bottom: 80px">
    <div class="van-address-list" v-if="addressList.length > 0">
      
      <div class="van-address-item" v-for="(item,index) in addressList" :key="index">
        <van-radio-group v-model="radio" direction="horizontal" v-if="type == 'select' && addressList.length > 0" style="margin-bottom: 12px">
          <van-radio :name="item.address_id" >选择当前地址</van-radio>
        </van-radio-group>
        <div class="title">
          <div class="left">
            <h3 class="name">{{item.consignee}} <span class="phone">{{item.mobile | cryptPhone}}</span>
            <van-tag type="info" v-if="item.is_default == 1">默认</van-tag>
            </h3>
          </div>
          <div class="right">
              <van-icon
                :name="`${staticPath}/icon_shanchu @2x.png`"
                size="24px"
                @click="handleEdit(item)"
              />
            </div>
        </div>
        <div class="desc">{{item.province_name + item.city_name + item.district_name + item.address}}</div>
        <van-cell
          clickable
          @click="toggle"
        >
          <template #icon>
            <van-checkbox
              v-model="item.is_default"
              style="pointer-events: none"
              checked-color="#4ECE40"
              >{{item.is_default == 1 ? '已设为默认地址' : '设为默认地址'}}</van-checkbox
            >
          </template>

          <div class="right-value flex">
            <van-icon name="delete" size="18px" @click="handleDel(item)" color="#999" />
          </div>
        </van-cell>
      </div>
      <div class="fixed-bottom">
        <van-pagination v-model="currentPage" :page-count="totalPage" :items-per-page="20" @change="turnPage" mode="simple" />
      </div>
      <van-button color="#4ECE40" block plain v-if="type == 'select' && addressList.length > 0" @click="handleSelect">确定选择</van-button>
    </div>
    <van-empty description="暂无数据" v-else />

    <div class="add-new">
      <van-button color="#4ECE40" block to="/user/address/add"
        >新增地址</van-button
      >
    </div>
  </div>
</template>

<script>
import { myAddress,delAddressService } from '@/service/user'
import { GetQueryString } from '@/utils/index'
export default {
  data() {
    return {
      addressList: [],
      currentPage: 1,
      pageSize: 20,
      totalPage: 0,
      staticPath: process.env.VUE_APP_STATIC_PATH,
      type: '',
      redirect: '',
      radio: null
    };
  },

  created(){
    this.queryAddressList()
    this.type = GetQueryString('type')
    this.redirect = decodeURIComponent(GetQueryString('redirect'))
    console.log(decodeURIComponent(GetQueryString('redirect')))
  },

  components: {},

  computed: {},

  methods: {
    handleSelect(){
      if(!this.radio) return this.$toast('请选择一个地址')
      let query = this.addressList.filter(item => item.address_id === this.radio)[0];
      this.$store.commit('user/SET_HULI_ADDRESS',query)
      this.$router.replace({
        path: this.redirect
      })
    },
    handleDel(item) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定要删除吗?",
        })
        .then(async () => {
          let result = await delAddressService(item.address_id);
          if (result.status == 200 || result.status == 204) {
            this.queryAddressList();
            this.$toast("删除成功");
          } else {
            this.$toast(result.message);
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    handleEdit(item) {
      this.$router.push({
        path: `/user/address/detail/${item.address_id}`,
      });
    },
    turnPage(e){
      this.currentPage = e;
      // let params = {
      //   pageNum: this.currentPage,
      //   expand: 'comment'
      // }
      // this.queryAddressList(params)
    },
    async queryAddressList(){
      let result = await myAddress();
      if(result.status == 200){
        this.addressList = result.data.model;
        this.pageSize = result.data._meta.totalCount;
        this.currentPage = result.data._meta.pageCount;
      }else{
        this.$toast(result.message)
      }
    },
    toggle(){

    }
  },
};
</script>
<style lang='less'>
.address-list{
  background: #f5f5f5;
  height: 100vh;
  padding: 15px;
  .van-address-item{
    border-radius: 6px;
    background: #fff;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 12px;
    width: 100%;
    .desc{
      padding: 10px 0;
    }
    .name {
        font-size: 16px;
        color: #000;
        display: flex;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          flex: 1;
          display: flex;
          justify-content: flex-start;
        }
        &::after {
          content: "";
          display: block;
        }
        .marin {
          margin: 0 8px;
          color: #999;
          font-size: 14px;
        }
        .age {
          color: #999;
          font-size: 14px;
        }
      }
    .van-cell{
      padding-left: 0;
      padding-right: 0;
    }
    .right-value{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
      .van-icon{
        margin-left: 10px;
      }
    }
    .desc{
      font-size: 13px;
      color: #333;
    }
    .title{
      font-size: 14px;
      color: #000;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .phone{
        margin: 0 8px;
      }
    }
  }
}
</style>